
<template>
  <el-dialog
    @close="handleClose"
    v-dialogDrag
    :title="'转炉'"
    :visible="showDialog"
    :width="'1050px'"
  >
    <div class="tab_line_box" v-loading="loading">
      <div class="tab_arrow_icon_left flex-x flex-center" @click="upper">
        <span class="el-icon-arrow-left"> </span>
      </div>
      <div class="tab_arrow_icon_right flex-x flex-center" @click="next">
        <span class="el-icon-arrow-right"> </span>
      </div>

      <div style="width: 88%; margin: 0 auto; position: relative">
        <el-table
          max-height="300px"
          border
          size="mini"
          :data="formulaParameter[0].keys"
          v-if="formulaParameter.length"
        >
          <el-table-column
            label="内容\名称"
            align="center"
            :resizable="false"
            :width="`${ONE_WIDTH + 2}px`"
            :min-width="`${ONE_WIDTH + 2}px`"
          >
            <!-- eslint-disable-next-line -->
            <template slot="header" slot-scope="scope"> 内容\名称 </template>
            <template slot-scope="scope">
              {{ scope.row }}
              <div
                :style="{
                  height: 35 * formulaParameter[0].keys.length + 'px',
                  transform: style.transform,
                }"
                v-if="scope.$index == 0"
                class="line"
              ></div>
            </template>
          </el-table-column>
          <el-table-column
            :resizable="false"
            :ref="`tab_column_${index}`"
            v-for="(item, index) in formulaParameter"
            :key="index"
            :label="'阶段' + (index + 1)"
            align="center"
          >
            <template slot-scope="scope">
              {{ item.values[scope.$index] }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose(false)">取 消</el-button>
      <el-button
        size="mini"
        type="primary"
        @click="submitForm()"
        :loading="btnLoading"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { formulaCut, formulaDetails } from "@/api/combinedFurnace";
import { useFurnaceToken } from "@/utils/index";
const ONE_WIDTH = 140 - 2;
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    token: {
      type: String,
      default: "",
    },
    formulaParameter: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    token: {
      handler: function (newData, oldData) {
        if (this.token && this.showDialog) {
          this.getDetails();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: true,
      btnLoading: false,
      ONE_WIDTH,
      style: {
        transform: `translateX(${ONE_WIDTH}px)`,
      },
      index: 1,
      translateX: ONE_WIDTH,
      form: {},
    };
  },
  methods: {
    getDetails() {
      this.loading = true;
      formulaDetails(this.token)
        .then((res) => {
          console.log("this.formulaParameter :>> ", this.formulaParameter);
          if (this.formulaParameter.length > 1) {
            this.next();
          }
          this.loading = false;
          const { data } = res;
          this.form = data;
        })
        .finally((f) => {
          this.loading = false;
        });
    },
    async submitForm() {
      if (this.index <= 1) {
        this.$msg("转炉选择不合法");
        return;
      }
      this.btnLoading = true;
      try {
        await formulaCut(
          [
            // 自己 的
            {
              ...this.form,
              state: "转炉",
            },
            // 拆分的左
            {
              ...this.form,
              token: useFurnaceToken(this.form, "01", 3),
              id: "",
              parentTaskNumber: this.form.token,
              formulaParameter: this.formulaParameter.filter(
                (item, index) => index > this.index - 2
              ),
            },
            // 拆分的右
            {
              ...this.form,
              token: useFurnaceToken(this.form, "02", 3),
              id: "",
              parentTaskNumber: this.form.token,
              formulaParameter: this.formulaParameter.filter(
                (item, index) => index <= this.index - 2
              ),
            },
          ],
          this.token
        ).then((res) => {
          this.$msg({
            type: "success",
            message: "转炉成功",
          });
          this.handleClose(true);
        });
      } catch (error) {
        this.btnLoading = false;
      }
    },
    handleClose(isRefresh) {
      Object.assign(this.$data, this.$options.data());
      this.$emit("update:showDialog", false);
      this.$emit("closeDialog", isRefresh);
    },
    next() {
      if (this.index == this.formulaParameter.length) {
        return;
      }
      this.$nextTick(() => {
        // 获取表格表头每一个的宽度
        const width = document
          .querySelector(".tab_line_box")
          .querySelector(".el-table__header")
          .querySelectorAll("th")[this.index].offsetWidth;
        // 每次移动的宽度
        this.translateX += width;
        this.index++;
        this.style = {
          // 宽度是 tab的个数
          // 每次移动当前第几个
          transform: `translateX(${this.translateX}px)`,
        };
      });
    },
    upper() {
      if (this.index == 1) {
        return;
      }
      this.index--;
      this.$nextTick(() => {
        // 获取表格表头每一个的宽度
        const width = document
          .querySelector(".tab_line_box")
          .querySelector(".el-table__header")
          .querySelectorAll("th")[this.index].offsetWidth;
        // 每次移动的宽度
        this.translateX = this.translateX - width;
        this.style = {
          transform: `translateX(${this.translateX}px)`,
        };
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.tab_line_box {
  position: relative;
  .tab_arrow_icon_right {
    border-radius: 999999px;
    background-color: rgba(31, 45, 61, 0.41);
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 50%;
    width: 38px;
    height: 38px;
    transform: translate(0, -50%);
    font-size: 28px;
    color: #fff;
  }
  .tab_arrow_icon_left {
    cursor: pointer;
    border-radius: 999999px;
    width: 38px;
    height: 38px;
    background-color: rgba(31, 45, 61, 0.41);
    position: absolute;
    left: 0;
    top: 50%;
    color: #fff;
    transform: translate(0, -50%);
    font-size: 28px;
  }
  .line {
    border-radius: 5px;
    cursor: all-scroll;
    z-index: 100;
    position: absolute;
    height: 100%;
    width: 4px;
    background-color: #f56c6c;
    transition: all 0.6s;
    top: 0;
    left: 0;
  }
}
</style>